<!--终端管理-->

<!DOCTYPE html>
<html>

<head>
    <%- include ../taglib/layout-table.ejs %>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>查询条件</h5>
                    <!--<div class="">-->
                    <!--&lt;!&ndash;<button class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;提交</button>&ndash;&gt;-->

                    <!--<a  href="javascript:void(0);" id="button" class="btn btn-primary "><i class="fa fa-check"></i>增加</a>-->
                    <!--</div>-->
                    <div class="ibox-tools">

                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="hidden" id="hidden_filter">
                        <!--<button id="go_search" class="btn btn-default">搜索1</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索2</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索3</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索4</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索5</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索5</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索5</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索5</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索5</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索5</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索5</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索5</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索5</button>-->
                        <!--<button id="go_search" class="btn btn-default">搜索5</button>-->
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>数据列表</h5>
                    <div class="ibox-tools">

                        <!--<a class="collapse-link">-->
                        <!--<i class="fa fa-chevron-up"></i>-->
                        <!--</a>-->

                    </div>
                </div>
                <div class="ibox-content">
                    <div class="" id="">
                        <!--<button id="go_search" class="btn btn-default">搜索1</button>-->
                        <button class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;新增</button>
                        <button class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;其他操作</button>
                    </div>
                    <table id="example" class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>
                                <!--<input type="checkbox" class="checkall" />-->
                            </th>
                            <th>客户名称</th>
                            <th>设备号码</th>
                            <th>创建人</th>
                            <th>时间</th>
                            <th width="200px">操作</th>
                        </tr>
                        </thead>
                        <tbody></tbody>

                        <!--<tfoot>-->
                        <!--<tr>-->
                        <!--<th>-->
                        <!--&lt;!&ndash;<input type="checkbox" class="checkall" />&ndash;&gt;-->
                        <!--</th>-->
                        <!--<th>部门名称</th>-->
                        <!--<th>设备号码</th>-->
                        <!--<th>创建人</th>-->
                        <!--<th>时间</th>-->
                        <!--<th>部门id</th>-->

                        <!--</tr>-->
                        <!--</tfoot>-->
                        <!--<thead>-->
                        <!--<tr>-->
                        <!--<th>Name</th>-->
                        <!--<th>Position</th>-->
                        <!--<th>Office</th>-->
                        <!--<th>Extn.</th>-->
                        <!--<th>Start date</th>-->
                        <!--<th>Salary</th>-->
                        <!--</tr>-->
                        <!--</thead>-->
                    </table>

                </div>
            </div>
        </div>
    </div>

</div>


<%- include ../taglib/layout-content.ejs %>

<script>

    $(document).ready(function () {
//    $('.dataTables-example tfoot th').each( function () {
//        var title = $('.dataTables-example thead th').eq( $(this).index() ).text();
//        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
//    } );
        var table = $('.dataTables-example').dataTable({

            "lengthChange": false,//是否允许用户自定义显示数量
            "ajax": {
                "url": "/terminal/list",
                "dataSrc": "data"

            },
//        serverSide: true,
            columns: [
                {
                    "sClass": "text-center",
                    "data": "id",
                    'checkboxes': {
                        'selectRow': true,
                    },

                },
                {"sClass": "text-center", data: 'deptName'},
                {"sClass": "text-center", data: 'baseTerminalId'},
                {"sClass": "text-center", data: 'createBy'},
                {"sClass": "text-center", data: 'lastUpdateAt'},
//            { data: 'deptId' },
                {
                    "bSortable": false,
                    "orderable": false,
                    "sClass": "text-center",
                    data: function (e) {//这里给最后一列返回一个操作列表
                        //e是得到的json数组中的一个item ，可以用于控制标签的属性。
                        return '' +
                            '<button class="btn btn-info btn-sm" type="button"><i class="fa fa-paste"></i> <span class="bold">编辑</span>' +
                            '<button class="btn btn-warning btn-sm" type="button"><i class="fa fa-warning"></i> <span class="bold">删除</span>';

                    }
                },
//            {
//                data: function (e) {//这里给最后一列返回一个操作列表
//                    //e是得到的json数组中的一个item ，可以用于控制标签的属性。
//                    return '<p><button class="btn btn-large btn-primary" type="button">Large button</button>' +
//                        '<button class="btn btn-large" type="button">Large button</button> </p>';
//                }
//            }
            ],
            'order': [[0, 'asc']],
//        initComplete: function (setting, json) {
//            //初始化完成之后替换原先的搜索框。
//            //本来想把form标签放到hidden_filter 里面，因为事件绑定的缘故，还是拿出来。
//            $("#example_filter input[type=search]")
////            debugger;
//            $("#example_filter").html("<form id='filter_form'>" + $("#hidden_filter").html() + "</form>");
//        },
        });

//    选中行数据
        $('#button').click(function () {
            alert(table.DataTable().rows('.selected').data().length + ' row(s) selected');
        });
        $(document).on("click", "#go_search", function () {
            debugger;
            $("#example").DataTable().search('', false, false).draw();
//        $("#example").DataTable().draw();//点搜索重新绘制table。
        });
        $(document).on("click", ".show-detail-json", function () {//取出当前行的数据
            debugger;
            alert(JSON.stringify($("#table_server").DataTable().row($(this).parents("tr")).data()));
        });
    });
</script>


</body>

</html>
